<template>
  <div class="auth-info">
    <el-row>

      <el-dialog title="审核不通过"
                 :visible.sync="dialogFormVisiblePa">
        <el-form :model="formPass"
                 ref="formPass"
                 :rules="rulesPass">
          <el-form-item label="不通过原因"
                        class="item-class"
                        prop="reason"
                        label-width="110px">
            <el-input v-model="formPass.reason"
                      type="textarea"
                      :rows="3"
                      @input="onInputChange(formPass.reason)"
                      maxlength="50"
                      placeholder="请输入不通过原因"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-col :span="24"
                  style="text-align:right;">
            <span>{{num}}/50</span>
          </el-col>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisiblePa = false,formPass.reason=''">取 消</el-button>
          <el-button type="primary"
                     @click="failSure('formPass')">确 定</el-button>
        </div>
      </el-dialog>

      <el-col :span="24">
        <el-col :span="24">
          审核信息
        </el-col>
        <el-col :span="24"
                class="mid-contain">
          <el-tabs type="border-card">
            <el-tab-pane label="人员信息">
              <el-form :model="form"
                       ref="form"
                       :rules="rulesForm">
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="真实姓名"
                                  label-width="90px"
                                  prop="user_name"
                                  class="item-class">
                      <el-input v-model="form.user_name"
                                :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="手机号码"
                                  label-width="90px"
                                  class="item-class">
                      <el-input v-model="form.phone"
                                :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="岗位"
                                  label-width="80px"
                                  class="item-class">
                      <el-input v-model="form.job_name"
                                :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <!-- <el-col :span="12"
                        class="judge-bottom">
                  <el-button @click="onPass('form')">审核通过</el-button>
                  <el-button @click="onFail('form')">审核不通过</el-button>
                </el-col> -->
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="单位信息">
              <el-form :model="formUnit"
                       ref="formUnit"
                       :rules="rulesformUnit">
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="单位类型"
                                  prop="unitType"
                                  label-width="170px"
                                  class="item-class"
                                  id="unit-class">
                      <!-- <el-input v-model="formUnit.unitType"></el-input> -->
                      <el-select v-model="formUnit.unitType"
                                 placeholder="请选择"
                                 @change="onUnitChange">
                        <el-option v-for="item in typeArr"
                                   :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="单位名称"
                                  prop="unitName"
                                  label-width="170px"
                                  class="item-class">
                      <el-input v-model="formUnit.unitName"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>

                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="法人姓名"
                                  label-width="170px"
                                  prop="userName"
                                  class="item-class">
                      <el-input v-model="formUnit.userName"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="统一社会信用代码"
                                  label-width="170px"
                                  prop="creditCode"
                                  class="item-class">
                      <el-input v-model="formUnit.creditCode"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="单位地址"
                                  label-width="170px"
                                  prop="area_no"
                                  style="display:flex;flex-direction:row;justify-content:space-between;"
                                  class="item-class"
                                  id="addr-class">
                      <!-- <el-select v-model="formUnit.province"
                                 placeholder="请选择">
                        <el-option v-for="item in provinceArr"
                                   :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                      <el-select v-model="formUnit.city"
                                 placeholder="请选择">
                        <el-option v-for="item in cityArr"
                                   :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                      <el-select v-model="formUnit.area"
                                 placeholder="请选择">
                        <el-option v-for="item in areaArr"
                                   :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                      </el-select> -->

                      <LocationSelect :locaData.sync="formUnit"></LocationSelect>

                      <!-- <el-input v-model="formUnit.unitAdd"></el-input> -->
                    </el-form-item>
                  </el-col>
                </el-col>

                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="营业执照"
                                  label-width="170px"
                                  class="item-class"
                                  id="relative-card"
                                  style="text-align:left!important;">
                      <!-- <el-input v-model="formUnit.phone"></el-input> -->
                      <el-upload class="business-logo-upload img-upload"
                                 :http-request="uploadBusinessImg"
                                 action=""
                                 :show-file-list="false"
                                 :on-success="handleCompanylogoSuccess"
                                 :before-upload="beforeCompanylogoUpload">
                        <img :src="formUnit.credit_img"
                             v-if="formUnit.credit_img"
                             class="logo">
                        <i v-else
                           class="el-icon-plus logo-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="企业logo"
                                  label-width="170px"
                                  class="item-class">
                      <el-col :span="24"
                              style="display:flex;flex-direction:row;justify-content:space-between;">
                        <el-upload class="business-logo-upload img-upload"
                                   :http-request="uploadLogoImg"
                                   action=""
                                   :show-file-list="false"
                                   :on-success="handleCompanylogoSuccess"
                                   :before-upload="beforeCompanylogoUpload">
                          <img :src="formUnit.logo_img"
                               v-if="formUnit.logo_img"
                               class="logo">
                          <i v-else
                             class="el-icon-plus logo-uploader-icon"></i>
                        </el-upload>
                      </el-col>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="14">
                    <el-form-item label="网站封面"
                                  label-width="170px"
                                  class="item-class">
                      <el-col :span="24"
                              style="display:flex;flex-direction:row;justify-content:space-between;">
                        <el-upload class="business-logo-upload img-upload"
                                   :http-request="uploadWebImg"
                                   action=""
                                   :show-file-list="false"
                                   :on-success="handleCompanylogoSuccess"
                                   :before-upload="beforeCompanylogoUpload">
                          <img :src="formUnit.web_img"
                               v-if="formUnit.web_img"
                               class="logo">
                          <i v-else
                             class="el-icon-plus logo-uploader-icon"></i>
                        </el-upload>

                      </el-col>
                    </el-form-item>
                  </el-col>
                </el-col>

                <el-col :span="14"
                        class="judge-bottom">
                  <el-button @click="onPassUnit('formUnit')">审核通过</el-button>
                  <el-button @click="onFailUnit"
                             class="fail-style">审核不通过</el-button>
                </el-col>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24"
                class="bottom-margin">
          <el-button type="primary"
                     @click="onBack">返回</el-button>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import LocationSelect from '@/components/LocationSelect/LocationSelect'
import { AccountReviewApi } from "@/services/AccountReview";
import { standardCodeApi } from "@/services/StandardCode";
import { UploadFileApi } from '@/services/UserPermission';
export default {
  components: {
    LocationSelect
  },
  data () {
    return {
      user_reg_id: '',
      company_apply_id: '',
      num: 0,
      status: '',
      user_type: this.$route.query.user_type,
      typeArr: [],
      companyLogoInfo: {},
      formPass: {
        reason: ''
      },
      user_reg_id: '',
      company_name: '',
      dialogFormVisiblePa: false,
      form: {
        user_reg_id: this.$route.query.user_reg_id,
        user_name: '',
        phone: '',
        job_name: '',
        status: this.$route.query.status,
        reason: ''
      },
      formUnit: {
        creditCode: '',
        userName: '',
        unitName: '',
        unitType: '',
        credit_img: '',
        credit_path: '',
        logo_img: '',
        logo_path: '',
        web_img: '',
        web_path: '',
        province: '',
        city: '',
        area: '',
        area_no: '',
      },
      provinceArr: [],
      cityArr: [],
      areaArr: [],
      rulesPass: {
        reason: [
          { required: true, message: '不通过原因不能为空', trigger: 'blur' }
        ]
      },
      rulesForm: {
        user_name: [
          { required: true, message: '用户不能为空', trigger: 'blur' }
        ],
        phone: [
          {
            required: true, message: '手机不能为空', trigger: 'blur'
          }
        ]
      },
      rulesformUnit: {
        unitType: [
          { required: true, message: '单位类型不能为空', trigger: 'blur' }
        ],
        unitName: [
          { required: true, message: '单位名称不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '法人姓名不能为空', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
        ],
        area_no: [
          { required: true, message: '单位地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onInputChange (val) {
      if (val.length <= 50 && val.length >= 0) {
        this.num = val.length;
      }
    },
    handleChange (value) {
      console.log(value);
    },
    //返回事件
    onBack () {
      this.$router.push('accountReview')
    },
    //单位类型
    onUnitChange (val) {
      console.log('单位类型=', val)
    },
    handleCompanylogoSuccess () {

    },

    beforeCompanylogoUpload () {

    },
    // 上传相关证件
    uploadBusinessImg (params) {
      let formData = new FormData()
      formData.append('module', 'business-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.formUnit.credit_img = res.data.file_path;
          this.formUnit.credit_path = res.data.file_name;
        }
      })
    },
    //logo
    uploadLogoImg (params) {
      let formData = new FormData()
      formData.append('module', 'business-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.formUnit.logo_img = res.data.file_path;
          this.formUnit.logo_path = res.data.file_name;
        }
      })
    },
    //网站
    uploadWebImg (params) {
      let formData = new FormData()
      formData.append('module', 'business-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.formUnit.web_img = res.data.file_path;
          this.formUnit.web_path = res.data.file_name;
        }

      })
    },
    // 人员信息--->不通过弹框的提交
    failSure (data) {

      this.$refs[data].validate((valid) => {
        if (valid) {
          this.form.reason = this.formPass.reason;
          //     AccountReviewApi.onJudgePass({
          //       data: this.form
          //     }).then((res) => {
          //       if (res.code == 0) {
          //         this.dialogFormVisiblePa = false;
          //         this.$message.success('操作成功!');
          //         this.$router.push('/accountReview');//跳转
          //       } else {
          //         this.$message.fail(res.msg);
          //       }

          //     }).catch((error) => {
          //       console.log(error)
          //     })
          //     console.log('valid=', valid)
          AccountReviewApi.onpassOrFailUnit({
            data: {
              company_apply_id: this.company_apply_id,
              phone: this.form.phone,
              status: this.status,
              appr_result: 3,
              user_reg_id: this.user_reg_id,
              user_name: '',
              job_name: '',
              credit_img: this.formUnit.credit_path,
              appr_message: this.form.reason,
              company_name: this.formUnit.unitName,
              area_id: this.formUnit.area_no,
              addr: '',
              jd: '',
              wd: '',
              contact_name: '',
              contact_phone: '',
              legal_name: this.formUnit.userName,
              legal_card_type: '',
              credit_code: this.formUnit.creditCode,
              legal_card_no: '',
              ind_domain: '',
              index_img: this.formUnit.web_path,
              logo: this.formUnit.logo_path,
              email: '',
              company_type: this.formUnit.unitType
            }
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!');
              this.$router.push('accountReview');
            }
          }).catch((error) => {
            console.log(error);
          })
        }
      });
    },
    //单位信息->审核通过
    onPassUnit (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          AccountReviewApi.onpassOrFailUnit({
            data: {
              company_apply_id: this.company_apply_id,
              phone: this.form.phone,
              status: this.status,
              appr_result: 2,
              user_reg_id: this.user_reg_id,
              user_name: '',
              job_name: '',
              credit_img: this.formUnit.credit_path,
              appr_message: '',
              company_name: this.formUnit.unitName,
              area_id: this.formUnit.area_no,
              addr: '',
              jd: '',
              wd: '',
              contact_name: '',
              contact_phone: '',
              legal_name: this.formUnit.userName,
              legal_card_type: '',
              credit_code: this.formUnit.creditCode,
              legal_card_no: '',
              ind_domain: '',
              index_img: this.formUnit.web_path,
              logo: this.formUnit.logo_path,
              email: '',
              company_type: this.formUnit.unitType
            }
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!');
              this.$router.push('accountReview');
            }
          }).catch((error) => {
            console.log(error);
          });
        }
      });
    },
    //单位信息-不通过
    onFailUnit () {
      this.dialogFormVisiblePa = true;
    },
    //获取用户的详情
    getUserDetail () {
      AccountReviewApi.getUserDetail({
        data: {
          user_reg_id: this.user_reg_id
        }
      }).then((res) => {
        this.form.user_name = res.data.user_name;
        this.form.phone = res.data.phone;
        this.form.job_name = res.data.job_name;
        this.formPass.reason = res.data.reason;
        this.status = res.data.status;
      }).catch((error) => {
        console.log(error)
      })
    },
    getUnitInfo () {
      AccountReviewApi.getUnitInfo({
        data: {
          company_name: this.company_name
        }
      }).then((res) => {
        this.formUnit.unitName = res.data.company_name;
        this.formUnit.unitType = res.data.company_type;
        this.formUnit.userName = res.data.legal_name;
        this.formUnit.creditCode = res.data.credit_code;
        this.formUnit.credit_img = res.data.credit_img;//相关证件
        this.formUnit.logo_img = res.data.logo;//logo图片
        this.formUnit.web_img = res.data.index_img;//封面图片
        this.formUnit.area_no = res.data.area_no;//获取区的唯一码

        this.company_apply_id = res.data.company_apply_id;
        this.user_reg_id = res.data.user_reg_id;
      }).catch((error) => {
        console.log(error)
      })
    },
    //获取标准码
    getStardandCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'companyType'
        }
      }).then((res) => {
        this.typeArr = res.data.list;
        console.log('标准码', res);
      }).catch((error) => {
        console.log(error)
      })
    }

  },
  watch: {
    formUnit: {
      handler (newval, oldval) {
        this.formUnit.area_no = newval.area_no;
        console.log(newval, 'watch formUnit')
      },
      deep: true
    }
  },
  created () {
    // if (window.sessionStorage.getItem('access_token')) {
    if (window.localStorage.getItem('access_token')) {
      //获取标准码
      this.getStardandCode();
    }
    if (this.$route.query.user_reg_id != undefined && this.$route.query.company_name != undefined) {
      //传用户id获取用户详情信息
      this.user_reg_id = this.$route.query.user_reg_id;
      this.company_name = this.$route.query.company_name;
      this.getUserDetail();
      this.getUnitInfo();
    }
    //普通用户不调用接口
    // if (this.user_type != undefined || this.user_type != 4) {
    //   //获取单位信息详情

    //   this.getUnitInfo();
    // }


  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.fail-style {
  border-color: red;
  color: red;
}
#personShenHe /deep/ .el-cascader {
  width: 100% !important;
}
.bottom-margin {
  text-align: center;
  margin-top: 20px;
}
/deep/ #unit-class .el-select {
  width: 100% !important;
}
/deep/ #relative-card .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: flex-start !important;
}
/deep/ .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  display: flex !important;
  justify-content: space-between !important;
}
/deep/ #addr-class .el-select {
  width: 32% !important;
}
.img-upload {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .logo {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.judge-bottom {
  text-align: center;
}
.auth-info {
  padding: 20px;
}
.mid-contain {
  margin-top: 20px;
}
.item-class {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
}
</style>
